import React from 'react';
import {View, Text, Button, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {HeaderTitle} from '@react-navigation/elements';
import {useSelector, useDispatch} from 'react-redux';

import HeaderStyle2 from '@/components/HeaderStyle2';
import ToggleDrawer from './ToggleDrawer';
import {useSafeState} from 'ahooks';

export default ({
  leftNavIsOpen,
  setLeftNavIsOpen,
  pageName,
  children,
  ...otherProps
}) => {
  const toggleDrawerProps = {leftNavIsOpen, setLeftNavIsOpen};
  const navigation = useNavigation();
  const headerBackgroundColor = useSelector(
    state => state.headerBackgroundColor.value,
  );
  const contentBackgroundColor = useSelector(
    state => state.contentBackgroundColor.value,
  );

  const [showTitle, setShowTitle] = useSafeState(true);
  const [headerRight, setHeaderRight] = useSafeState(<Text></Text>);

  const {headerShown = true} = otherProps.options || {};

  const HeaderCom = () => (
    <HeaderStyle2>
      <View
        style={{
          height: '100%',
          width: '100%',
          backgroundColor: headerBackgroundColor,
          flexDirection: 'row',
          alignItems: 'center',
          paddingLeft: 16,
          paddingRight: 16,
        }}>
        <ToggleDrawer {...toggleDrawerProps} />
        {showTitle && (
          <View
            style={{
              marginLeft: 28,
            }}>
            <HeaderTitle>{pageName}</HeaderTitle>
          </View>
        )}
        <View
          style={{
            flex: 1,
            height: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}>
          {headerRight}
        </View>
      </View>
    </HeaderStyle2>
  );
  return (
    <View
      style={{
        flex: 1,
      }}>
      {!!headerShown && <HeaderCom />}

      <ScrollView style={{flex: 1, backgroundColor: contentBackgroundColor}}>
        {React.cloneElement(children, {
          ...otherProps,
          pageName,
          setHeaderRight,
        })}
      </ScrollView>
    </View>
  );
};
